Forms are an essential tool which enable a web user to send information to the web server, e.g. name and credit card information when making a purchase on the web. Forms are our first step in creating content for Web 2.0, i.e. up to now everything we have done is strictly one-way, methods to create content to display on our web pages. Forms are one way to send information from a client which is the computer we are working on to a server, which is the computer which many users are communicating. e.g. the Computer Science Department Windows 2003 server in 1N, which we are using for this course. Right now we will discuss only the client-side aspect of forms. We will discuss the server-side aspect later but will not be able to do much with it due to lack of privileges granted to students and faculty on any CSI servers.
So, Caveat Emptor, nothing in this form will get sent anywhere and nothing really works. Blame CSI's very necessary precautions against hacking our servers!
Here is an example of a very simple form:
Please fill out this form to help us improve this online course.
The form element defines a form. The method attribute specifies how the data is sent to the server; With the post method, the user does not see her/his data after it is submitted. The action attribute specifies the URL of the form handler, a script (program) on the web server which will process the data in the form. It is empty here because we have no access to the server, as explained above. The input elements specify data given to the form handler.
The input attribute type = "hidden" sends data to the form which the user did not enter.
The input attribute name = "recipient" specifies an email address to which the data will be sent.
The input attribute name = "subject" specifies the subject line of the email
The input attribute name = "redirect" specifies the URL to jump to after the form is submitted
The element label puts a label on the input box. The attribute name describes the purpose of the input box. The attribute text describes an input box into which text is to be entered. The attribute size specifies the number of characters visable in the input box. The attribute maxlength limits the length of the input. Try this by editing this tutorial page to see what happens with or without maxlength.
The input attribute type = "submit" creates a button which, when pressed by the user, sends the user entered data to the URL specified in the action attribute (nowhere in this case!). The value attribute gives the text displayed on the button. You may test this by changing it in the XHTML code.
The input attribute type = "reset" creates a button which, when pressed by the user, resets the data to its original values.
The textarea element creates a multiline textbox, with the number of rows and cols specified. The default text is entered between the textarea tags.
The input attribute type = "password" inserts a text box into which the data the user types is replaced with dots for privacy.
The input attribute type = "checkbox" inserts a box which a user may click on to select from a number of options. More than one checkbox may be clicked.
The input attribute type = "radio" inserts a box which a user may click on to select from a number of options. Only one radio button may be clicked. The attribute checked = "checked" specifies which button, if any, is checked initially.
The select element creates a drop-down list, identified by its attribute name.
The option element adds items to the drop-down list, its selected attribute gives the default option.
WHEW! We're done with basic XHTML - Please go to Part 6 to learn about Cascasing Style Sheets (CSS)
Click here for part 6